<form class="js-ajax-form" action="{$form.action.url}" method="post">
    <if condition="$form.hidden">
        <foreach name="hidden" key="key" item="value">
        <input type="hidden" name="{$key}" value="{$value}">
        </foreach>
    </if>
    <table class="table table-bordered">
    <foreach name="$fields" item="field">
    <if condition="$field['readable']">
        <if condition="isset($fields_widget[$field['name']])">
        <tr>{$fields_widget[$field["name"]]}</tr>
        <else/>
        <tr>
            <th>
                <label for="{$field.name}">{$field.title}</label>
                <if condition="$field['required']"><span class="form-required">*</span></if>
            </th>
            <td>
            <switch name="$field['type']">
                {/** 选择类型的字段 */}
                <case value="checkbox">
                    <input type="checkbox" name="{$field.name}" id="{$field.name}" {$field.value ? 'checked' : '' }>
                </case>
                <case value="select">
                    <select id="input-{$field.name}" class="form-control" name="{$field.name}">
                    <foreach name="$field['options']" item="item">
                        <option value="{$item.name}" {$item.selected ? 'selected' : '' }>{$item.title}</option>
                    </foreach>
                    </select>
                </case>
                <case value="radio">
                    <foreach name="$field['options']" item="item">
                        <input type="radio" name="{$field.name}" id="{$field.name}-{$item.name}" value="{$item.name}" {$item.selected ? 'checked' : '' }>
                        <label for="{$field.name}-{$item.name}">{$item.title}</label>
                    </foreach>
                </case>
                <case value="multiple">
                    <foreach name="$field['options']" item="item">
                        <input type="checkbox" name="{$field.name}[]" id="{$field.name}-{$item.name}" value="{$item.name}" {$item.selected ? 'checked' : '' }>
                        <label for="{$field.name}-{$item.name}">{$item.title}</label>
                    </foreach>
                </case>

                {/** 上传单张图片 */}
                <case value="image">
                    <div style="text-align: center;">
                        <input type="hidden" name="{$field.name}" id="{$field.name}" value="{$field.value}">
                        <a href="javascript:uploadOneImage('图片上传','#{$field.name}');">
                            <?php $image_url=$field['value'] ? cmf_get_image_preview_url($field['value']) : '__TMPL__/public/assets/images/default-thumbnail.png'; ?>
                            <img src="{$image_url}" id="{$field.name}-preview" width="135" style="cursor: pointer"/>
                        </a>
                        <input type="button" class="btn btn-sm" value="取消图片" 
                            onclick="$('#{$field.name}-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');$('#{$field.name}').val('');">
                    </div>
                </case>
                <case value="file">
                    <input type="text" name="{$field.name}" class="form-control" value="{$field.value}" id="{$field.name}">
                    <a href="javascript:uploadOne('图片上传','#{$field.name}','file');" class="btn btn-default btn-sm">选择文件</a>
                </case>

                {/** 上传多张图片或多个文件 */}
                <case value="images">
                    <script type="text/html" id="images-item-tpl">
                        <li id="saved-{$field.name}-{id}">
                            <input id="{$field.name}-{id}" type="hidden" name="{$field.name}_urls[]" value="{filepath}">
                            <input class="form-control" id="{$field.name}-{id}-name" type="text" name="{$field.name}_names[]" value="{name}" style="width: 200px;" title="图片名称">
                            <img id="{$field.name}-{id}-preview" src="{url}" style="height:36px;width: 36px;" onclick="imagePreviewDialog(this.src);">
                            <a href="javascript:uploadOneImage('图片上传','#{$field.name}-{id}');">替换</a>
                            <a href="javascript:(function(){$('#saved-{$field.name}-{id}').remove();})();">移除</a>
                        </li>
                    </script>
                    <ul id="{$field.name}" class="pic-list list-unstyled form-inline">
                    <foreach name="field.value" item="vo">
                        <li id="saved-{$field.name}-{$key}">
                            <input id="{$field.name}-{$key}" type="hidden" name="{$field.name}_urls[]" value="{$vo.url}">
                            <input class="form-control" id="{$field.name}-{$key}-name" type="text" name="{$field.name}_names[]" value="{$vo.name|default=''}" style="width: 200px;" title="图片名称">
                            <img id="{$field.name}-{$key}-preview" src="{:cmf_get_image_preview_url($vo['url'])}" style="height:36px;width: 36px;" onclick="parent.imagePreviewDialog(this.src);">
                            <a href="javascript:uploadOneImage('图片上传','#{$field.name}-{$key}');">替换</a>
                            <a href="javascript:(function(){$('#saved-{$field.name}-{$key}').remove();})();">移除</a>
                        </li>
                    </foreach>
                    </ul>
                    <a href="javascript:uploadMultiImage('图片上传','#{$field.name}','images-item-tpl');" class="btn btn-default btn-sm">选择图片</a>
                </case>
                <case value="files">
                    <script type="text/html" id="files-item-tpl">
                        <li id="saved-{$field.name}-{id}">
                            <input id="{$field.name}-{id}" type="hidden" name="{$field.name}_urls[]" value="{filepath}">
                            <input class="form-control" id="{$field.name}-{id}-name" type="text" name="{$field.name}_names[]" value="{name}" style="width: 200px;" title="文件名称">
                            <a id="{$field.name}-{id}-preview" href="{preview_url}" target="_blank">下载</a>
                            <a href="javascript:uploadOne('文件上传','#{$field.name}-{id}','file');">替换</a>
                            <a href="javascript:(function(){$('#saved-{$field.name}-{id}').remove();})();">移除</a>
                        </li>
                    </script>
                    <ul id="{$field.name}" class="pic-list list-unstyled form-inline">
                    <foreach name="field.value" item="vo">
                        <li id="saved-{$field.name}-{$key}">
                            <input id="{$field.name}-{$key}" type="hidden" name="{$field.name}_urls[]" value="{$vo.url}">
                            <input class="form-control" id="{$field.name}-{$key}-name" type="text" name="{$field.name}_names[]" value="{$vo.name}" style="width: 200px;" title="图片名称">
                            <a id="{$field.name}-{$key}-preview" href="{:cmf_get_file_download_url($vo['url'])}" target="_blank">下载</a>
                            <a href="javascript:uploadOne('文件上传','#{$field.name}-{$key}','file');">替换</a>
                            <a href="javascript:(function(){$('#saved-{$field.name}-{$key}').remove();})();">移除</a>
                        </li>
                    </foreach>
                    </ul>
                    <a href="javascript:uploadMultiFile('附件上传','#{$field.name}','files-item-tpl','file');" class="btn btn-sm btn-default">选择文件</a>
                </case>

                {/** 日期时间选择器 */}
                <case value="datetime">
                    <input class="form-control js-bootstrap-datetime" id="input-{$field.name}" type="text" name="{$field.name}" value="{$field.value}">
                </case>
                <case value="date">
                    <input class="form-control js-bootstrap-date" id="input-{$field.name}" type="text" name="{$field.name}" value="{$field.value}">
                </case>
                <case value="time">
                    <input class="form-control js-bootstrap-time" id="input-{$field.name}" type="text" name="{$field.name}" value="{$field.value}">
                </case>
                
                {/** 地理位置 */}
                <case value="location">
                    <input type="text" name="{$field.name}_text" class="form-control" onclick="doSelectLocation(this)" data-title="请选择位置" value="{$field.value.text}">
                    <input type="hidden" name="{$field.name}" class="form-control" value="{$field.value.longitude},{$field.value.latitude}">
                </case>

                {/** 多行文本 */}
                <case value="textarea">
                    <textarea class="form-control" id="{$field.name}" name="{$field.name}" style="height: 50px;" placeholder="{$field.describe}">{$field.value}</textarea>
                </case>

                {/** html编辑器 */}
                <case value="html">
                    <?php $html_content=cmf_replace_content_file_url(htmlspecialchars_decode($field["value"])); ?>
                    <script type="text/plain" id="{$field.name}" name="{$field.name}">{$html_content}</script>
                    <script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
                    <script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
                    <script>
                        $(function () {
                            editorcontent = new baidu.editor.ui.Editor();
                            editorcontent.render('{$field.name}');
                            try {editorcontent.sync();} catch (err) {}
                        });
                    </script>
                </case>

                {/** 关联数据选择 */}
                <case value="refer">
                    <input class="form-control" type="text" style="width:400px;" required value="{:implode(' ',$field.referred.names)}"
                        placeholder="{$field.describe}" onclick="doSelectRefer();" id="js-{$field.name}-name-input" readonly/>
                    <input class="form-control" type="hidden" value="{:implode(',',$field.referred.ids)}" name="{$field.name}" id="js-{$field.name}-id-input"/>
                    <script>
                        function doSelectRefer() {
                            var ids = $('#js-{$field.name}-id-input').val();
                            openIframeLayer("{:url('selectRefer')}?action_id=17&ids=" + ids, '请选择', {
                                area: ['700px', '400px'],
                                btn: ['确定', '取消'],
                                yes: function (index, layero) {
                                    var iframeWin          = window[layero.find('iframe')[0]['name']];
                                    var selected = iframeWin.confirm();
                                    if (selected.id.length == 0) {layer.msg('请选择');return;}
                                    $('#js-{$field.name}-id-input').val(selected.id.join(','));
                                    $('#js-{$field.name}-name-input').val(selected.name.join(' '));
                                    layer.close(index);
                                }
                            });
                        }
                    </script>
                </case>

                {/** 数值 */}
                <case value="range">
                    <input class="form-control" type="range" name="{$field.name}" id="{$field.name}" min="{$field.min}" max="{$field.max}"
                        value="{$field.value}" placeholder="{$field.describe}"
                        <?php if(!$field['writable']) echo 'readonly'; if($field['required']) echo 'required';?> />
                </case>
                {/*
                    其他类型的字段
                    以字段类型作为输入控件的类型，且值不需要特殊处理的字段
                */}
                <default />
                    <input class="form-control" type="{$field['type']|default='text'}" name="{$field.name}" id="{$field.name}" 
                        value="{$field.value}" placeholder="{$field.describe}"
                        <?php if(!$field['writable']) echo 'readonly'; if($field['required']) echo 'required';?> />
            </switch>
            </td>
        </tr>
        </if>
    </if>
    </foreach>
    </table>
    <div class="form-group">
        <button type="submit" class="btn btn-primary js-ajax-submit">{$form.action.title}</button>
    </div>
</form>
<script>
    function doSelectLocation(obj) {
        var $obj       = $(obj);
        var title      = $obj.data('title');
        var $realInput = $obj.next();
        var location   = $realInput.val();

        parent.openIframeLayer(
            "{:url('admin/dialog/map')}?location=" + location,
            title,
            {
                area: ['95%', '90%'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var iframeWin = parent.window[layero.find('iframe')[0]['name']];
                    var location  = iframeWin.confirm();
                    $realInput.val(location.lng + ',' + location.lat);
                    $obj.val(location.address);
                    parent.layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            }
        );
    }
</script>
